<template>
  <div class="nav" @mouseleave="leave" :class="[isChange ? 'change' : 'noChange']">
    <div class="nav-center">
      <img src="../../assets/images/bibang.png" alt="">
      <ul id="uls">
        <li @click="goIndex(index)" @mouseenter="isBot(item)" v-for="(item,index) in liData">{{item.title}}
          <ul v-show="item.hasC">
            <li @mouseenter="showImages(items)" v-for="(items,index) in item.second">
              <a :class="index===key?'act':''" @mouseenter="goStr(index)" @click="goPage(items.secondTitle)">{{items.secondTitle}}</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <span class="image-show" v-show="showImg"><img :src="imgData.cover" alt=""></span>
  </div>

</template>

<script>

  export default {
    name: "navBox",
    data(){
      return {
        liData: [
          {
            title: '首页',
            isBot: 'false',
            hasC: false
          },
          {
            title: '飞行平台',
            isBot: 'true',
            second: [
              {
                secondTitle: 'L1 探索无人机',
                cover: require('../../assets/images/uploadImg/L1.jpg')
              },
              {
                secondTitle: 'Z5pro 采样无人机',
                cover: require('../../assets/images/uploadImg/Z10.jpg')
              },
              {
                secondTitle: 'Z10 农业无人机',
                cover: require('../../assets/images/uploadImg/Z10.jpg')
              },
            ],
            hasC: false
          },
          {
            title: '控制平台',
            isBot: 'true',
            second: [
              {
                secondTitle: '猎户座2 多旋翼飞控',
                cover: require('../../assets/images/uploadImg/Orion2.jpg')
              },
              {
                secondTitle: '仙女座 多机编队系统',
                cover: require('../../assets/images/uploadImg/planes.gif')
              }
            ],
            hasC: false
          },
          {
            title: '专业组件',
            isBot: 'true',
            hasC: false,
            second: [
              {
                secondTitle: 'P1 精准降落模组',
                cover: require('../../assets/images/uploadImg/Orion2.jpg')
              },
              {
                secondTitle: '润物3 智能流量计',
                cover: require('../../assets/images/uploadImg/Flowmeter3.jpg')
              },
              {
                secondTitle: 'R1 多机遥控器',
                cover: require('../../assets/images/uploadImg/R1.jpg')
              },
              {
                secondTitle: 'S1 三防地面站',
                cover: require('../../assets/images/uploadImg/station.png')
              }
            ]
          },
          {
            title: '行业方案',
            isBot: 'true',
            hasC: false,
            second: [
              {
                secondTitle: '润物云数据',
                cover: require('../../assets/images/uploadImg/runwuyun.jpg')
              },
              {
                secondTitle: '多机协同编队',
                cover: require('../../assets/images/uploadImg/white.jpg')
              },
              {
                secondTitle: '农业植保测绘',
                cover: require('../../assets/images/uploadImg/white.jpg')
              },
              {
                secondTitle: '环境水源检测',
                cover: require('../../assets/images/uploadImg/white.jpg')
              },
              {
                secondTitle: '短距物流运输',
                cover: require('../../assets/images/uploadImg/white.jpg')
              },
              {
                secondTitle: '科研挂载平台',
                cover: require('../../assets/images/uploadImg/white.jpg')
              }
            ]
          },
          {
            title: '服务支持',
            isBot: 'true',
            hasC: false,
            second: [
              {
                secondTitle: '产品购买',
                cover: require('../../assets/images/uploadImg/white.jpg')
              },
              {
                secondTitle: '产品定制',
                cover: require('../../assets/images/uploadImg/white.jpg')
              },
              {
                secondTitle: '商务合作',
                cover: require('../../assets/images/uploadImg/white.jpg')
              },
              {
                secondTitle: '售后服务',
                cover: require('../../assets/images/uploadImg/white.jpg')
              },
            ]
          },
          {
            title: '关于我们',
            isBot: 'false',
            hasC: false
          }
        ],
        isChange: false,
        imgData: {},
        showImg: false,
        key: 0
      }
    },
    methods: {
      goPage(data) {
        console.log(data)
        switch (data) {
          case "L1 探索无人机":
            this.$router.push({name: 'L1'});
            break;
          case "Z1 科研无人机":
            this.$router.push({name: 'Z1'});
            break;
          case "Z5pro 采样无人机":
            this.$router.push({name: 'Z5'});
            break;
          case "Z10 农业无人机":
            this.$router.push({name: 'Z10'});
            break;
          case "猎户座2 多旋翼飞控":
            this.$router.push({name: 'LHZ'});
            break;
          case "仙女座 多机编队系统":
            this.$router.push({name: 'XNZ'});
            break;
          case "P1 精准降落模组":
            this.$router.push({name: 'P1'});
            break;
          case "润物3 智能流量计":
            this.$router.push({name: 'RWY'});
            break;
          case "R1 多机遥控器":
            this.$router.push({name: 'R1'});
            break;
          case "S1 三防地面站":
            this.$router.push({name: 'S1'});
            break;
          case "润物云数据":
            this.$router.push({name: 'H1'});
            break;
          case "多机协同编队":
            this.$router.push({name: 'H2'});
            break;
          case "农业植保测绘":
            this.$router.push({name: 'H3'});
            break;
          case "环境水源检测":
            this.$router.push({name: 'H4'});
            break;
          case "短距物流运输":
            this.$router.push({name: 'H5'});
            break;
          case "科研挂载平台":
            this.$router.push({name: 'H6'});
            break;
             case "产品购买":
            this.$router.push({name: '服务支持'});
            break;
         }
        },
      isBot(data) {
        this.key = 0;
        if (data.isBot === 'true') {
          this.isChange = true;
          this.showImg = true;
          this.liData.forEach((item) => {
            item.hasC = false
          })
          data.hasC = 'true';
          this.imgData = data.second[0]
        } else {
          this.liData.forEach((item) => {
            item.hasC = false
          })
          this.isChange = false
          this.showImg = false
        }
      },
      leave() {
        this.isChange = false
        this.showImg = false
        this.liData.forEach((item) => {
          item.hasC = false
        })
      },
      showImages(data) {
        this.imgData = data
      },
      goStr(data) {
        this.key = data;
      },
      goIndex(data) {
        console.log(data)
        if(data == 0) {
          this.$router.push({name: '首页'});
        }else if(data == 6) {
          this.$router.push({name: '关于我们'});
        }
      }
    }
  }
</script>

<style lang="scss">
  .nav {
    position: fixed;
    top: 0;
    z-index: 999;
    background: white;
    width: 100%;
    height: 60px;
    .nav-center {
      width: 1200px;
      height: 60px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 120px;
        cursor: pointer;
      }
      > ul {
        display: flex;
        position: relative;
        > li:nth-child(1):after {
          content: '';
          height: 3px;
          width: 50px;
          background: #95cc1b;
          position: absolute;
          left: 5px;
          bottom: -8px;
        }
        > li {
          position: relative;
          padding: 0 15px;
          cursor: pointer;
          > ul {
            position: absolute;
            top: 45px;
            left: -40px;
            width: 200%;
            > li {
              margin: 10px 0;
              height: 20px;
              text-align: center;
              cursor: pointer;
            }
          }
        }
      }
    }
    .image-show {
      display: block;
      width: 280px;
      height: 180px;
      position: absolute;
      top: 78px;
      left: 278px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .change {
    overflow: hidden;
    height: 300px !important;
    transition: all .5s;
  }
  .noChange {
    height: 60px;
    transition: all .5s;
  }
  .act {
    font-weight: 700;
  }
</style>

